<template>
  <el-card>
    <div class="search-list">
      <el-form
        :inline="true"
        :model="searchForm"
        class="form-inline"
        @submit.native.prevent
      >
        <el-form-item>
          <el-input
            placeholder="请输入窍编号"
            v-model="searchForm.boxCode"
            size="medium"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchForm.labelType"
            placeholder="标签类型"
            size="medium"
            clearable
          >
            <el-option
              v-for="item in labelTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchForm.timeArray"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="medium"
            value-format="timestamp"
            :unlink-panels="true"
            :clearable="false"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="searchList"
            >查询</el-button
          >
        </el-form-item>
      </el-form>

      <ExcelButton @outExcel="outExcel" :isExcelLoading='isExcelLoading' />
    </div>

    <ElTable
      refName="rfidList"
      @pageChange="pageChange"
      :data-source="rfidList"
      :data-config="tableConfig"
      :total="total"
      :pageSize="pageSize"
      :pageNum="pageNum"
      :isLoading="isLoading"
    >
      <template #labelType="{ scope }">
        <span class="color">{{ scope.row.labelType.info }}</span>
      </template>
    </ElTable>
  </el-card>
</template>

<script>
import { getLabelChangeList } from "@/api/member/rfid.js";
import ElTable from "@/components/table/ElTable.vue";
import ExcelButton from "@/components/public-style/ExcelButton";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  components: {
    ElTable,
    ExcelButton,
  },
  data() {
    return {
      total: 0,
      pageSize: 10,
      pageNum: 1,
      rfidList: [],
      isLoading: false,
      tableConfig: [
        {
          prop: "boxCode",
          label: "窍编号",
        },
        {
          prop: "labelType",
          label: "标签类型",
        },
        {
          prop: "oldLabel",
          label: "老标签",
          width: "260px"
        },
        {
          prop: "newLabel",
          label: "新标签",
          width: "260px"
        },
        {
          prop: "remark",
          label: "更换原因",
        },
        {
          prop: "createdOn",
          label: "更换时间",
          width: "150px"
        },
        {
          prop: "workerCode",
          label: "操作人",
        },
      ],
      labelTypeList: [
        { label: "身份标签", value: 0 },
        { label: "封条标签", value: 1 },
      ],
      searchForm: {
        boxCode: null,
        labelType: null,
        timeArray: [],
      },
      isExcelLoading: false
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getLabelChangeList();
  },
  watch: {},
  methods: {
    // 查询标签
    searchList() {
      this.pageNum = 1;
      this.getLabelChangeList();
    },
    // 分页变化
    pageChange(emitData) {
      this.pageNum = emitData.pageNum;
      this.pageSize = emitData.pageSize;
      this.getLabelChangeList();
    },
    // 获得标签列表
    getLabelChangeList() {
      const data = {
        ...this.searchForm,
        labelType:
        this.searchForm.labelType === "" ? null : this.searchForm.labelType,
        startTime: parseInt(this.searchForm.timeArray[0] / 1000),
        endTime: parseInt(this.searchForm.timeArray[1] / 1000),
      };
      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      this.isLoading = true;
      this.exportData = data;
      getLabelChangeList(data, params)
        .then((res) => {
          res.data.map((e) => {
            e.createdOn = this.$moment(e.createdOn * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          this.rfidList = res.data;
          this.total = res.total;
          this.isLoading = false;
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    // 导出标签列表
    outExcel() {
      this.isExcelLoading = true
      axios({
        headers: {
          Authorization: JSON.parse(Cookies.get("userInfo")).token,
        },
        url: "/api/depot/rfid/exportLabelChangeLog",
        method: "post",
        responseType: "blob", // 后台响应数据类型
        data: this.exportData,
      }).then((response) => {
        this.isExcelLoading = false
        let fname =
          "标签更换列表_" + this.$moment(new Date()).format("YYYY-MM-DD") + ".xlsx";
        const link = document.createElement("a");
        link.href = window.URL.createObjectURL(new Blob([response.data]));
        link.setAttribute("download", fname);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.search-list {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  ::v-deep .el-form {
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .form-inline {
    display: flex;
    align-items: center;
  }
}
</style>
